<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Image Properties</title>
    <style type="text/css">
    body { background-color: transparent; margin: 10px; font-family: Verdana; font-size: 7pt; }
    div#Views { height: 150px; border: solid 1px; }
    div#Preview { display: none; }
    div#Tabbar { position: relative; left: 0px; top: 0px; }
    div#Tabbar div { position: absolute; top: 0px; left: 1px; display: inline; width: 90px; height: 17px; text-align: center; line-height: 16px; cursor: pointer; }
    table { width: 368px; border-collapse: collapse; margin: 5px; }
    td { width: 92x; border: solid 1px; height: 20px; vertical-align: middle; cursor: pointer;}
    td.value { width: 273px; cursor: default; }
    td span { margin-left: 5px; }
    td input { font-family: Verdana; font-size: 7pt; font-weight: bold; margin-left: 3px; margin-right: 3px; }
    td select { width: 75px; border: solid 1px; background-color: transparent; color: transparent; font-family: Verdana; font-size: 7pt;  font-weight: bold; margin-left: 3px; }
    td input.url { width: 268px; border: solid 1px; }
    td input.text { width: 268px; border: solid 1px; }
    td input.size { width: 30px; border: solid 1px; }
    td input.unit { width: 15px; border: solid 1px; }
    td input.hidden { display: none; }
    td input.images { width: 60px; font-weight: normal; margin-top: 1px; margin-right: 0px; height: 16px; font-size: 6pt; }
    </style>
</head>
<body>
    <form id="form1" action="Image.htm" onsubmit="return false;">
        <div>
            <div id="Views">
                
                <div id="Properties">

                    <table id="PropertiesTable" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td onclick="fx.SelectLabel(this)"><span>Url</span></td>
                            <td class="value"><input type="text" id="UrlTextBox" class="url" maxlength="1024" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" /><input type="button" id="ImagesButton" value="Images..." onclick="ShowImages()" class="hidden" title="Upload or select image" /></td>
                        </tr>
                        <tr>
                            <td onclick="fx.SelectLabel(this)"><span>Alternate Text</span></td>
                            <td class="value"><input type="text" id="AlternateTextTextBox" class="text" maxlength="512" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" /></td>
                        </tr>
                        <tr>
                            <td onclick="fx.SelectLabel(this)"><span>Dimensions</span></td>
                            <td class="value">
                                <span>Height:</span>
                                <input type="text" id="HeightTextBox" class="size" maxlength="4" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                                <span>Width:</span>
                                <input type="text" id="WidthTextBox" class="size" maxlength="4" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                                <span>Border:</span>
                                <input type="text" id="BorderWidthTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                            </td>
                        </tr>
                        <tr>
                            <td onclick="fx.SelectLabel(this)"><span>Alignment</span></td>
                            <td class="value">
                                <span>Float:</span>
                                <select id="FloatSelectBox" onfocus="fx.SelectLabel(this)">
                                    <option value="">None</option>
                                    <option value="left">Left</option>
                                    <option value="right">Right</option>
                                </select>
                                <span>Vertical:</span>
                                <select id="VerticalAlignSelectBox" onfocus="fx.SelectLabel(this)">
                                    <option value="">None</option>
                                    <option value="text-top">Top</option>
                                    <option value="middle">Middle</option>
                                    <option value="text-bottom">Bottom</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td onclick="fx.SelectLabel(this)"><span>Margins</span></td>
                            <td class="value">
                                <span>Left:</span>
                                <input type="text" id="MarginLeftTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                                <span>Top:</span>
                                <input type="text" id="MarginTopTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                                <span>Right:</span>
                                <input type="text" id="MarginRightTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                                <span>Bottom:</span>
                                <input type="text" id="MarginBottomTextBox" class="unit" maxlength="2" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" />
                            </td>
                        </tr>
                        <tr>
                            <td onclick="fx.SelectLabel(this)"><span>ToolTip</span></td>
                            <td class="value"><input type="text" id="ToolTipTextBox" class="text" maxlength="512" onfocus="fx.OnTextBoxFocus(this)" onblur="fx.OnTextBoxBlur(this)" /></td>
                        </tr>
                    </table>

                </div>
                
                <div id="Preview"></div>
                
            </div>
            
            <div id="Tabbar">
                <div id="PropertiesTab" onclick="fx.OnTab(this)"><span>Properties</span></div>
                <div id="PreviewTab" onclick="fx.OnTab(this)" style="left: 93px;"><span>Preview</span></div>
            </div>
            
        </div>
    </form>
</body>

<script type="text/javascript">

var fx = null;

String.prototype.trim = function()
{
    return this.replace(/^\s+|\s+$/g, '');
}

function ShowImages()
{
    var imageBrowser = FindImageBrowser();
    if (!imageBrowser) return;
    
    fx.SetShield(true);
    
    var colors = fx.colors;
    imageBrowser.SetColors(colors.body,
                           colors.text,
                           colors.heading, 
                           colors.headingText, 
                           colors.buttonBar,
                           colors.table,
                           colors.tabText,
                           colors.selectedTabText,
                           colors.unselectedTab,
                           colors.selectedTab,
                           colors.borders);

    imageBrowser.Show(OnImagesHide, OnSelectImage);
}

function OnImagesHide()
{
    fx.SetShield(false);
}

function OnSelectImage(src)
{
    var urlTextBox = document.getElementById("UrlTextBox");
    urlTextBox.value = src;
    urlTextBox.focus()
}

function FindImageBrowser()
{
    var extension = fx.FindExtension(parent.Winthusiasm.HtmlEditor.IImageBrowser);
    if (!extension) return null;
    
    return parent.$find(extension.id);
}

function OnBeforeViewChange(viewID)
{
    switch (viewID)
    {
        case "Preview" :
            Preview();
            break;
        default :
            break;
    }
}

function OnAfterViewChange(viewID)
{
    switch (viewID)
    {
        case "Properties" :
            fx.Focus('UrlTextBox');
            break;
        default :
            break;
    }
}

function GetInitialPreviewOuterHTML()
{
    var colors = fx.options.colors;
    var bgColor = "background-color:" + colors.body;
    var fgColor = "color:" + colors.text;

    var outerHTML = 
        "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>" +
        "<html xmlns='http://www.w3.org/1999/xhtml'>" +
        "<head>" + 
        "<title>Preview Frame</title>" + 
        "<style type='text/css'>" + 
        "body {" + bgColor + "; " + fgColor + "; font-family: Verdana; font-size: 7pt; margin: 0px; padding: 0px; }" +
        "</style>" + 
        "</head>" + 
        "<body></body>" + 
        "</html>";
        
    return outerHTML;
}

function GetProperties()
{
    var p = new Object();
    p.elements = new Object();
    p.values = new Object();
    
    p.elements.urlTextBox = document.getElementById("UrlTextBox");
    p.elements.altTextBox = document.getElementById("AlternateTextTextBox");
    p.elements.heightTextBox = document.getElementById("HeightTextBox");
    p.elements.widthTextBox = document.getElementById("WidthTextBox");
    p.elements.borderWidthTextBox = document.getElementById("BorderWidthTextBox");
    p.elements.floatSelectBox = document.getElementById("FloatSelectBox");
    p.elements.verticalAlignSelectBox = document.getElementById("VerticalAlignSelectBox");
    p.elements.marginLeftTextBox = document.getElementById("MarginLeftTextBox");
    p.elements.marginTopTextBox = document.getElementById("MarginTopTextBox");
    p.elements.marginRightTextBox = document.getElementById("MarginRightTextBox");
    p.elements.marginBottomTextBox = document.getElementById("MarginBottomTextBox");
    p.elements.toolTipTextBox = document.getElementById("ToolTipTextBox");
    
    p.values.url = fx.GetValue(p.elements.urlTextBox);
    p.values.alt = fx.GetValue(p.elements.altTextBox);
    p.values.height = fx.GetValue(p.elements.heightTextBox);
    p.values.width = fx.GetValue(p.elements.widthTextBox);
    p.values.borderWidth = fx.GetValue(p.elements.borderWidthTextBox);
    p.values.styleFloat = fx.GetValue(p.elements.floatSelectBox);
    p.values.verticalAlign = fx.GetValue(p.elements.verticalAlignSelectBox);
    p.values.marginLeft = fx.GetValue(p.elements.marginLeftTextBox);
    p.values.marginTop = fx.GetValue(p.elements.marginTopTextBox);
    p.values.marginRight = fx.GetValue(p.elements.marginRightTextBox);
    p.values.marginBottom = fx.GetValue(p.elements.marginBottomTextBox);
    p.values.toolTip = fx.GetValue(p.elements.toolTipTextBox);
    
    var style = "";
    var v = p.values;
    
    if (v.height) style += "height: " + v.height + "px; ";
    if (v.width) style += "width: " + v.width + "px; ";
    if (v.borderWidth) style += "border: solid " + v.borderWidth + "px; ";
    if (v.styleFloat) style += "float: " + v.styleFloat + "; ";
    if (v.verticalAlign) style += "vertical-align: " + v.verticalAlign + "; ";
    if (v.marginLeft) style += "margin-left: " + v.marginLeft + "px; ";
    if (v.marginTop) style += "margin-top: " + v.marginTop + "px; ";
    if (v.marginRight) style += "margin-right: " + v.marginRight + "px; ";
    if (v.marginBottom) style += "margin-bottom: " + v.marginBottom + "px; ";
    
    p.style = style;
        
    return p;
}

function GetImageHtml()
{
    var html = "";
    var p = GetProperties();
    var v = p.values;    
    
    if (v.url)
    {
        html += "<img src='" + v.url + "'";
        html += " alt='" + (v.alt ? v.alt : "") + "'";
        
        if (p.style.length > 0)
            html += " style='" + p.style + "'";
                
        if (v.toolTip)
            html += " title='" + v.toolTip + "'";
        
        html += "/>";
    }
    
    return html;
}

function GetLatinText()
{
    return "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum accumsan, ipsum ut dapibus dapibus, nunc arcu congue velit, sit amet pretium est felis ut libero. Suspendisse hendrerit vestibulum pede."
}

function Preview()
{
    var f = document.getElementById("PreviewFrame");
    var d = f.contentDocument || f.contentWindow.document || f.document;
    
    var html = GetImageHtml();
    
    if (html.length == 0)
        html += "Url is <strong>not</strong> entered";
    else
        html += GetLatinText();
    
    d.body.innerHTML = html;
}

function InitializePreview()
{
    var preview = document.getElementById("Preview");
    
    var f = document.createElement("iframe");
    f.id = "PreviewFrame";
    f.frameBorder = "0";
    f.height = "140px";
    f.width = "368px";
    f.scrolling = "auto";
    f.style.margin = "5px";
    
    preview.appendChild(f);
    
    var frameDocument = f.contentWindow.document;
    var outerHTML = GetInitialPreviewOuterHTML();
    
    frameDocument.open("text/html", "replace");
    frameDocument.write(outerHTML);
    frameDocument.close();
}

function InitializeValues(img)
{
    var p = GetProperties();
    var e = p.elements;
    var s = img.style;
    
    e.urlTextBox.value = img.src ? img.src : "";
    e.altTextBox.value = img.alt ? img.alt : "";
    e.heightTextBox.value = s.height ? fx.RemoveUnit(s.height) : "";
    e.widthTextBox.value = s.width ? fx.RemoveUnit(s.width) : "";
    e.borderWidthTextBox.value = s.borderWidth ? fx.GetBorderWidth(s.borderWidth) : "";
    e.floatSelectBox.value = 
        s.styleFloat ? fx.FindOption(e.floatSelectBox, s.styleFloat) : "";
    e.verticalAlignSelectBox.value = 
        s.verticalAlign ? fx.FindOption(e.verticalAlignSelectBox, s.verticalAlign) : "";
    e.marginLeftTextBox.value = s.marginLeft ? fx.RemoveUnit(s.marginLeft) : "";
    e.marginTopTextBox.value = s.marginTop ? fx.RemoveUnit(s.marginTop) : "";
    e.marginRightTextBox.value = s.marginRight ? fx.RemoveUnit(s.marginRight) : "";
    e.marginBottomTextBox.value = s.marginBottom ? fx.RemoveUnit(s.marginBottom) : "";
    e.toolTipTextBox.value = img.title ? img.title : "";
}

function SetValues(img)
{
    var p = GetProperties();
    var v = p.values;
    
    img.src = v.url ? v.url : "";
    img.alt = v.alt ? v.alt : "";
    img.style.cssText = p.style;
    img.title = v.toolTip ? v.toolTip : "";
}

function InitializeImageBrowser()
{
    document.getElementById("UrlTextBox").style.width = "200px";
    document.getElementById("ImagesButton").className = "images";
}

function Initialize(frameworkBehavior)
{
    fx = frameworkBehavior;
    
    fx.InitializeDocument();
    fx.InitializeViews("Views", "Properties,Preview");
    fx.InitializeTabs("Tabbar", "PropertiesTab,PreviewTab");
    fx.InitializeTables("PropertiesTable");
    
    if (FindImageBrowser())
        InitializeImageBrowser();

    InitializePreview();

    if (fx.IsParent("img"))
    {
        InitializeValues(fx.context.parentElement);
    }
    
    fx.Focus('UrlTextBox');
}

function OnClose()
{
    var imageBrowser = FindImageBrowser();
    if (!imageBrowser) return;
    
    imageBrowser.Hide();
}

function OnOK()
{
    if (fx.IsParent("img"))
    {
        SetValues(fx.context.parentElement);
    }
    else
    {
        var html = GetImageHtml();
        if (html.length == 0) return;
        
        fx.ExecuteCommand("inserthtml", html);
    }
}

</script>    

</html>
